{% extends "base.html" %}

{% block title %}Prometheus告警{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables button -->
<link rel="stylesheet" href="/static/bower_components/fx/buttons.bootstrap.min.css">
<!-- DataTables searchPanes -->
<link rel="stylesheet" href="/static/bower_components/fx/searchPanes.bootstrap.min.css">
<link rel="stylesheet" href="/static/bower_components/fx/select.bootstrap.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    Prometheus告警管理
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li>告警管理</li>
    <li class="active"><a href="/alarms/prom/">Prom告警</a></li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <!--表格1-->
      <div class="box">
        <div class="box-header">
          <!--          <h3 class="box-title">公共平台</h3>-->
        </div>
        <div class="box-body table-responsive">
          <table id="example" class="table  table-condensed table-bordered table-hover"
                 style="font-size: 90%;width:100%">
            <thead>
            <tr>
              <th style="text-align: center">ID</th>
              <th style="text-align: center">状态</th>
              <th style="text-align: center">级别</th>
              <th style="text-align: center">告警源</th>
              <th style="text-align: center">告警标题</th>
              <th style="text-align: center">告警内容</th>
              <th style="text-align: center">主机</th>
              <th style="text-align: center">发生时间</th>
              <th style="text-align: center">结束时间</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
          </table>

        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->

{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables buttons-->
<script src="/static/bower_components/fx/dataTables.buttons.min.js"></script>
<script src="/static/bower_components/fx/buttons.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/jszip.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>-->
<script src="/static/bower_components/fx/buttons.html5.min.js"></script>
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>-->
<script src="/static/bower_components/fx/buttons.colVis.min.js"></script>

<!-- DataTables searchPanes-->
<script src="/static/bower_components/fx/dataTables.searchPanes.min.js"></script>
<script src="/static/bower_components/fx/searchPanes.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/dataTables.select.min.js"></script>


<!-- Page specific script -->
<script>

    $(document).ready(function () {
        var table = $('#example').DataTable({
            ajax: '/api/v1/alarm/prom',
            columns: [
                {data: 'id'},
                {data: 'status'},
                {data: 'severity'},
                {data: 'source'},
                {data: 'alertname'},
                {data: 'content'},
                {data: 'instance'},
                {data: 'startsAt'},
                {data: 'endsAt'},
            ],
            order: [[0, 'desc']],
            processing: true,
            language: {
                "url": "/static/language.json"
            },
            lengthChange: false,
            searchPanes: {
                initCollapsed: true,
                // cascadePanes: true
                columns: [1, 2, 3, 6,]
            },
            scrollX: true,
            responsive: true,
            autoWidth: true,
            stateSave: true,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            buttons: [
                'pageLength',
                {
                    extend: 'colvis',
                    collectionTitle: '显示/隐藏列'
                },
                'excel',
            ],
            columnDefs: [
                // {
                //     "targets": [3, 6, 7,8, 10, 11, 12, 14, 19, 20],
                //     "visible": false,
                // }
                {
                    "targets": 2,
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == '严重') {
                            $(td).css("background-color", "#E45959");
                        } else if (cellData == '一般') {
                            $(td).css("background-color", "#FFA059")
                        } else if (cellData == '通知') {
                            $(td).css("background-color", "#98FB98");
                        } else {
                             $(td).css("background-color", "#D1EEEE");
                        }
                    }
                },
                // {
                //     targets: 7,
                //     render: $.fn.dataTable.render.moment()
                // }
            ],
            initComplete: function () {
                table.buttons().container().appendTo('#example_wrapper .col-sm-6:eq(0)')
                table.searchPanes.container().prependTo(table.table().container());
                table.searchPanes.resizePanes();
                table.columns.adjust().draw();
            }
        });

        // 根据URL的search参数，自动搜索
        let searchString = getQueryString('search')
        if (searchString !== '') {
            console.log(searchString)
            table.search(searchString);
            table.draw();
        }

        // 解决sidebar toogle之后，datatables标题行错位问题
        $('.sidebar-toggle').click(function () {
            $('.dataTables_scrollHeadInner').css('width', '100%');
            $('#example').css('width', '100%');
            setTimeout(function () {
                table.columns.adjust().draw();
            }, 400);
        });


    });

</script>
{% endblock%}